<template>
  <div class="coupon-com">
    <div v-show="showDelete" class="list-item-delete  ">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>

    <div v-show="item.stylesType == 0" class="styleOne  ">
      <div v-if="item.coupon.length < 1">
        <div class="card-wapper">
          <div class="card-show">
            <div class="card-top">
              <div class="card-top-show flexSc">
                <div class="top-left">
                  <div class="title">优惠劵</div>
                  <div class="beizhu">满200可使用</div>
                </div>
                <div class="top-right flexSc">
                  <div class="icon">￥</div>
                  <div class="prise">50</div>
                </div>
              </div>
            </div>
            <div class="card-bottom flexSc">
              <div class="bottom-date">有效时间 2019-6-18 至 2019-6-20</div>
              <div class="btn">领取</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="item.coupon.length == 1">
        <div
          v-for="(couponItem, couponIndex) in item.coupon"
          :key="couponIndex"
          class="card-wapper"
        >
          <div class="card-show">
            <div class="card-top">
              <div class="card-top-show flexSc">
                <div class="top-left">
                  <div class="title">{{ couponItem.title }}</div>
                  <div class="beizhu">
                    满{{ couponItem.type_condition }}可使用
                  </div>
                </div>
                <div class="top-right flexSc">
                  <div class="icon">￥</div>
                  <div v-if="couponItem.type == 0" class="prise">
                    {{ couponItem.type_money }}
                  </div>
                  <div v-else class="prise">
                    {{ couponItem.type_money }}折券
                  </div>
                </div>
              </div>
            </div>

            <div v-if="couponItem.type_time == 1" class="card-bottom flexSc">
              <div class="bottom-date">
                有效时间 {{ couponItem.stime }}至 {{ couponItem.etime }}
              </div>
              <div class="btn">领取</div>
            </div>
            <div v-if="couponItem.type_time == 2" class="card-bottom flexSc">
              <div v-if="couponItem.stime == 0" class="bottom-date">
                领取后立即生效，有效期{{ couponItem.etime }}天
              </div>
              <div v-else class="bottom-date">
                领取后{{ couponItem.stime }}天生效，有效期{{
                  couponItem.etime
                }}天
              </div>
              <div class="btn">领取</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="width:375px;">
        <div class="card-wapper">
          <div class="card-wapper-sm">
            <div class="card-wapper-sm-for-u">
              <div
                v-for="(couponItem, couponIndex) in item.coupon"
                :key="couponIndex"
                class="card-wapper-sm-for for-wlq flexS"
              >
                <div class="sm-left">
                  <div v-if="couponItem.type == 0" class="sm-left-top">
                    ￥{{ couponItem.type_money }}
                  </div>
                  <div v-else class="sm-left-top">
                    {{ couponItem.type_money }}折券
                  </div>
                  <div class="sm-left-bottom">
                    满{{ couponItem.type_condition }}使用
                  </div>
                </div>
                <div class="sm-right">领取</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.coupon-com {
  position: relative;
  .styleOne {
    .card-wapper {
      width: 100%;
      // margin-bottom: 9px;
      padding: 10px;
      .flexSc {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .card {
        width: 100%;
        height: 127px;
        background: skyblue;
      }
      .card-show {
        width: 100%;
        height: 127px;
        background: url("https://oss.ztwlxx.cn/jsynewshop%E4%BC%9A%E5%91%98%E5%8D%B7.png")
          no-repeat 0 50%;
        background-size: 100%;
      }
      .card-top {
        width: 100%;
        height: 72px;
        padding: 14px 9px 10px 18px;
      }
      .card-top-show {
        width: 100%;
        height: 100%;
      }
      .beizhu {
        height: 17px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        line-height: 27.3px;
        color: #f2dbac;
        margin-top: 6px;
      }
      .title {
        width: 214px;
        height: 22px;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        line-height: 27.3px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .date {
        height: 18px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        line-height: 25.8px;
        color: #666;
        margin-top: 32px;
      }
      .icon {
        width: 18px;
        height: 20px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #f2dbac;
      }
      .prise {
        height: 75px;
        line-height: 75px;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #f2dbac;
      }
      .bottom-date {
        font-size: 14px;
        height: 17px;
        font-family: PingFangSC-Regular;
        line-height: 25.8px;
        color: #666;
      }
      .card-bottom {
        width: 100%;
        height: 55px;
        padding: 18px 17px 15px 18px;
      }
      .guoqi-btn {
        border: solid 1px #9d9e9d;
        color: #9e9e9d;
      }
      .btn,
      .guoqi-btn {
        width: 61px;
        height: 26px;
        border: solid 1px #c09d53;
        text-align: center;
        font-size: 15px;
        line-height: 26px;
        color: #c09d53;
        border-radius: 7.5px;
      }
      .flexS {
        display: flex;
        justify-content: space-between;
      }
      .card-wapper-sm {
        width: 100%;
      }
      .card-wapper-sm-for {
        width: 152px;
        height: 84px;
        margin-right: 10px;
        background: url("https://oss.ztwlxx.cn/jsynewshop%E4%BC%98%E6%83%A0%E5%88%B8%E5%A4%87%E4%BB%BD12.svg")
          no-repeat;
        background-size: 152px 84px;
        color: #a4a4a4;
      }
      .for-wlq {
        width: 152px;
        height: 84px;
        background: url("https://oss.ztwlxx.cn/jsynewshop%E4%BC%98%E6%83%A0%E5%88%B8%E5%A4%87%E4%BB%BD13.svg")
          no-repeat;
        background-size: 152px 84px;
        color: #c7a763;
        margin-right: 10px;
      }
      .card-wapper-sm-for-u {
        width: 100%;
        display: flex;
      }
      .sm-left {
        font-size: 15px;
        margin-left: 12px;
        text-align: center;
      }
      .sm-left-bottom {
        margin-top: 8px;
      }
      .sm-left-top {
        width: 86px;
        line-height: 26px;
        padding-bottom: 8px;
        margin-top: 9px;
        text-align: center;
        border-bottom: solid 1px #bf9c52;
        color: #bf9c52;
      }
      .sm-right {
        font-size: 12px;
        color: #fff;
        height: 85px;
        width: 80px;
        line-height: 85px;
        margin-right: 11px;
        text-align: center;
        padding-left: 16px;
      }
    }
  }
}
</style>
